import styles from './index.module.less';
import * as echarts from 'echarts';
import React, { useEffect, useRef } from 'react';
import { ProFormDatePicker } from "@ant-design/pro-components";
import { useRequest } from "ahooks";
import { getWeekTaskSta } from "@/api/modules/report";
import { map } from 'lodash';

interface Props {
    chartData?: object
}

export default (props: Props) => {
    const { chartData } = props;
    const lineChartRef = useRef(null);
    const pieChartRef = useRef(null);
	const { data: staData } = useRequest(() => getWeekTaskSta({}));
    const data = staData?.data

    useEffect(() => {
        // 初始化图表
        const lineChart = echarts.init(lineChartRef.current);

        // 配置项
        const lineOption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['正常配送', '正常返空', '紧急配送', '紧急返空'],
                top: '15',
                right: '0',
            },
            color: ['#00D4B4', '#1364FF', '#F92356', '#FF9422'],
            grid: {
                right: '0',
                left: '3%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data?.dates,
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '正常配送',
                    type: 'line',
                    data: data?.series?.[0]?.data || []
                },
                {
                    name: '正常返空',
                    type: 'line',
                    data: data?.series?.[1]?.data || []
                },
                {
                    name: '紧急配送',
                    type: 'line',
                    data: data?.series?.[2]?.data || []
                },
                {
                    name: '紧急返空',
                    type: 'line',
                    data: data?.series?.[3]?.data || []
                },
            ]
        };

        
        // 设置配置项
        lineChart.setOption(lineOption);

        // 组件卸载时销毁图表
        return () => {
            lineChart.dispose();
        };
    }, [data]);

    useEffect(() => {
        const pieChart = echarts.init(pieChartRef.current);
        const seriesData = map(chartData, (item: any) => {
            return { name: item.jobType, value: item.count }
        })

        const pieOption = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            color: ['#00D4B4', '#1364FF', '#F92356', '#FF9422'],
            series: [
                {
                    name: '任务统计',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: seriesData
                }
            ]
        }
        pieChart.setOption(pieOption);

        // 组件卸载时销毁图表
        return () => {
            pieChart.dispose();
        };
    }, [chartData])

    
    return (
        <div className={styles.trendChartContainer}>
            <div className={styles.left}>
                <div className={styles.commonHeader}>
                    <div className={styles.title}>任务类型趋势</div>
                    <div className={styles.right}>

                    </div>
                </div>
                <div className={styles.content}>
                    <div ref={lineChartRef} style={{ width: '100%', height: '100%' }}></div>
                </div>
            </div>
            <div className={styles.right}>
                <div className={styles.commonHeader}>
                    <div className={styles.title}>任务统计</div>
                    <div className={styles.right}>

                    </div>
                </div>
                <ProFormDatePicker
                    placeholder={'请选择日期'}
                    className={styles.dataPicker}
                    fieldProps={{
                        style: {
                            marginTop: '15px',
                            width: '100%'
                        }
                    }}
                />
                <div className={styles.content}>
                    <div ref={pieChartRef} style={{ width: '100%', height: '100%' }}></div>
                </div>
            </div>
        </div>
    )
}